import React, { useEffect } from 'react'
import { Col, Row, Statistic } from 'antd';
import './style.scss'
import { Chart } from '@antv/g2';
// import { Rose } from '@ant-design/charts';
export default function DashBoard() {

  const data = [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ];
  const roseConfig = {
    data,
    xField: 'genre',
    yField: 'sold',
    seriesField: 'genre',
    radius: 0.9,
    legend: {
      position: 'bottom',
    },
  }
  let chart = null
  const initChart = () => {
    // 初始化图表实例
    chart = new Chart({
      container: 'chart1',
    });
    // 设置图表配置
    // 声明可视化
    chart
      .interval() // 创建一个 Interval 标记
      .data(data) // 绑定数据
      .encode('x', 'genre') // 编码 x 通道
      .encode('y', 'sold'); // 编码 y 通道
    chart.render();
  }

  useEffect(() => {
    initChart()
  }, [])
  return (
    <div>
      <Row gutter={10}>
        <Col span={6}>
          <div style={{ backgroundColor: '#1AE494', padding: 20 }}>
            <Statistic title="xxx销售额" value={112893} />
          </div>
        </Col>
        <Col span={6}>
          <div style={{ backgroundColor: '#00C6A3', padding: 20 }}>
            <Statistic title="xxx销售额" value={112893} />
          </div>
        </Col>
        <Col span={6}>
          <div style={{ backgroundColor: '#00A6A4', padding: 20 }}>
            <Statistic title="xxx销售额" value={112893} />
          </div>
        </Col>
        <Col span={6}>
          <div style={{ backgroundColor: '#008596', padding: 20 }}>
            <Statistic title="xxx销售额" value={112893} />
          </div>
        </Col>
      </Row>

      <Row gutter={10}>
        <Col span={12}>
          <div id="chart1"></div>
        </Col>
        <Col span={12}>
          {/* <Rose {...roseConfig}/> */}
        </Col>
      </Row>
    </div>
  )
}
